
<template>
  <div class="userListCard" v-infinite-scroll='load' :infinite-scroll-delay='2000' :infinite-scroll-distance='300' :infinite-scroll-immediate='false'>
    <div class="userCardItem" v-for="(v ,i) in userList" :key="i" @click="itemCardClick(v.userId)">
      <div class="userItem">
        <img class="userImg" :src="`${v.avatarUrl}?param=200y200`" alt="">
        <div class="right">
          <div class="nickname">{{v.nickname}}</div>
          <div class="signaturre txt1">
            {{v.signaturre}}
          </div>
          <div class="nums" v-if="userType =='personalPage' ">
            <div class="musicListNum">歌单:&nbsp;{{v.playlistCount}}</div>
            <div class="fenge">|</div>
            <div class="musicListNum">粉丝:&nbsp; {{v.followeds}}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'userListCard',
  props: {
    userList: {
      type: Array,
      default() {
        return []
      }
    },
    isLoad: {
      type: Boolean,
      default() {
        return false
      }
    },
    userType: {
      type: String,
      default: 'persongalPage'
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    load() {
      console.log('bottomload')
      if (this.isLoad) {
        this.$emit('bottomLoad')
        this.disabled = true
      }
    },
    itemCardClick(id) {
      this.$router.push({
        name: 'personal',
        params: { uid: id }
      })
    }
  },
  watch: {
    userList() {
      if (this.isLoad) {
        if (this.userList.length) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      }
    }
  }
}
</script>

<style scoped>
.userListCard {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
}
.userCardItem {
  margin: 0 auto;
}
.userItem {
  display: flex;

  width: 350px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}
.userItem:hover {
  background-color: #f9f9f9;
}
.userImg {
  margin-right: 10px;
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #ddd;
}
.nickname {
  margin: 10px 0 5px;
  font-size: 13px;
  color: #373737;
}
.signature {
  font-weight: lighter;
  font-size: 12px;
  transform: scale(0.9) translateX(-5%);
  flex: 1;
  width: 250px;
  height: 13px;
  margin: 5px 0;
}
.nums {
  display: flex;
  font-size: 12px;
  color: #888;
}
.fenge {
  color: #ddd;
  margin: 0 10px;
}
</style>